﻿<!DOCTYPE html>
<html lang="tw">
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <title></title>
    <style type="text/css">
        body
        {
            width:960px;            
            margin:5px auto;    
            font-family: 標楷體;      
            border-color:Black;
            border-width:2 px;
            border-style:solid;  
        }
        p
        {
            margin:0 0 20 0;            
        }
        thead { background: #eee; }
        td, th { border: 1px #ccc solid; }
        header #page_header
        {
            width:100%;
            border:#0000FF 5px solid; 
        }
        section#main
        {
            height:1100px;
        }
        section#panti
        {
          float:left;
          width:60%;  
          padding: 0 0 0 10; 
          border-width:2px;          
          border-color : #dddddd;
          border-style:dashed;          
        }        
        section#panti_side
        {
            float:right;
            width:38%;
            height:inherit;
            padding:2px;
            border-width:1px;          
            border-color : #dddddd;
            border-style:dashed;            
            font-family: 標楷體;
          }
          section#presay
          {
              float:right;
              font-family: 標楷體;
              font-size:30px;
              -webkit-writing-mode: vertical-rl;
              border-width:1px;          
              border-color : #dddddd;
              border-style:dashed;
              margin:0 5px 0 0;
          }
          
          section#pantio_ptions
          {
              font-family: 標楷體;
              width:170px;    
          }
          #putime
          {
              font-size:22px;                     
              width:100%;    
              margin: 0 0 10px 0;
              text-align:center;
          } 
          #options_table
          {
              font-size:30px;  
              width:100%;      
          }
         #options_table td
          {
              border-color:Gray;
              border-width:1px;
              border-style:dotted;              
          }

        footer
        {
            clear:both;
            width:100%;
            display:block;
            text-align:center;
            height:200px;
        }
        .style1
        {
            width: 4px;
        }
        .style5
        {
            font-size:20px;
            width: 50px;
            text-align:center;
            vertical-align:middle; 
        }
        .style9
        {
            font-size:20px;
            width: 50px;
            height:50px;
            text-align:center;
            vertical-align:middle; 
        }
        .style14
        {
            height: 50px;
        }
        .style25
        {
            font-size: large;
        }
        .style26
        {
            width: 127px;
            height: 50px;
            font-family: 標楷體;
            font-size: large;
        }
        .style27
        {
            font-size:20px;
            width: 50px;
            height: 80px;
            text-align: center;
            /*vertical-align: middle;     */
        }
        .style28
        {
            font-size: x-large;
        }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body onload="init();">
    <header id="page_header"> <span class="style28">乾道館</span></header>
    <section id="main">
        <section id="panti">
            <center>
        <table border=1 width="100%">
            <tr>
                <td class="style26">
                    占卜之事</td>
                <td class="style14">
                    <br />
                    <br />
                    <br />
                    <br />
                    </td>
            </tr>
            </table>     <br />   
    <table  border=1>
            <tr>
                <td id="t1_f" class="style5">
                    &nbsp;</td>
                <td id="t1_gan" class="style5">
                    &nbsp;</td>
                <td class="style1">
                    <span class="style25">初</span><br class="style25" />
                    <span class="style25">傳</span></td>
                <td id="t1_ji" class="style5">
                    &nbsp;</td>
                <td id="t1_god" class="style5">
                    &nbsp;</td>
            </tr>
            <tr>
                <td id="t2_f" class="style5">
                    &nbsp;</td>
                <td id="t2_gan" class="style5">
                    &nbsp;</td>
                <td class="style1">
                    <span class="style25">中</span><br class="style25" />
                    <span class="style25">傳</span></td>
                <td id="t2_ji" class="style5">
                    &nbsp;</td>
                <td id="t2_god" class="style5">
                    &nbsp;</td>
            </tr>
            <tr>
                <td id="t3_f" class="style5">
                    &nbsp;</td>
                <td id="t3_gan" class="style5">
                    &nbsp;</td>
                <td class="style1">
                    <span class="style25">末</span><br class="style25" />
                    <span class="style25">傳</span></td>
                <td id="t3_ji" class="style5">
                    &nbsp;</td>
                <td id="t3_god" class="style5">
                    &nbsp;</td>
            </tr>
        </table>
        
        </p>
      

    <table border=1>
        <tr>
            <td class="style27" id="c3_god">
                &nbsp;</td>
            <td class="style27" id="c2_god">
                &nbsp;</td>
            <td class="style27" id="c1_god">
                &nbsp;</td>
            <td class="style27" id="c0_god">
                <br />
            </td>
        </tr>
        <tr>
            <td class="style9" id="c3_up">
                &nbsp;</td>
            <td class="style9" id="c2_up">
                &nbsp;</td>
            <td class="style9" id="c1_up">
                &nbsp;</td>
            <td class="style9" id="c0_up">
                &nbsp;</td>
        </tr>
        <tr>
            <td class="style9" id="c3_down">
                &nbsp;</td>
            <td class="style9" id="c2_down">
                &nbsp;</td>
            <td class="style9" id="c1_down">
                &nbsp;</td>
            <td class="style9" id="c0_down">
                &nbsp;</td>
        </tr>
        <tr>
            <td class="style9">
                第<br />
                四<br />
                課</td>
            <td class="style9">
                第<br />
                三<br />
                課</td>
            <td class="style9">
                第<br />
                二<br />
                課</td>
            <td class="style9">
                第<br />
                一<br />
                課</td>
        </tr>
    </table>
    <canvas id="pan" width="560" height="560" style="border:1px;">
    </canvas>
    </center>
        </section>
        <section id="panti_side">
            <section id="presay">
        伏於民國&nbsp;&nbsp;&nbsp;&nbsp;年&nbsp;&nbsp;&nbsp;月&nbsp;&nbsp;日吉日良辰<br />
        為歲次&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;君代占六壬神課，懇時神明示並告年命&nbsp;&nbsp;&nbsp;&nbsp;行年&nbsp;&nbsp;&nbsp;&nbsp; 為禱<br />
        <br />祝詞：天何言哉，叩之即應，神之靈矣，感而遂通，今有某姓，有某事關心，不知休咎，罔釋厥疑，惟神惟靈，若可若否，望垂昭報，至敬至誠，無不感應。</section>
       <section width="50%" id="pantio_ptions">
       
       <table id="putime" border=1>
       <thead><td colspan="2">占課日期</td></thead>
       <tr><td>年</td><td id="gj_year"></td></tr>
       <tr><td>月</td><td id="gj_month"></td></tr>
       <tr><td>日</td><td id="gj_day"></td></tr>
       <tr><td>月將</td><td id="mongeneral"></td></tr>
       <tr><td>占時</td><td id="gj_hour"></td></tr>
       </table>

       <table id="options_table" >
       
       
       </table>
       </section>
        </section>
    </section>
    <footer>
    </footer>
    <script language="javascript">

        var MAX_DUMP_DEPTH = 10;

        function dumpObj(obj, name, indent, depth) {
            if (depth > MAX_DUMP_DEPTH) {
                return indent + name + ": <Maximum Depth Reached>\n";
            }
            if (typeof obj == "object") {
                var child = null;
                var output = indent + name + "\n";
                indent += "\t";
                for (var item in obj) {
                    try {
                        child = obj[item];
                    } catch (e) {
                        child = "<Unable to Evaluate>";
                    }
                    if (typeof child == "object") {
                        output += dumpObj(child, item, indent, depth + 1);
                    } else {
                        output += indent + item + ": " + child + "\n";
                    }
                }
                return output;
            } else {
                return obj;
            }
        }
      
    </script>
    <script type="text/javascript">

        var JiGon = {"寅":"甲",
                               "辰":"乙",
                               "巳":"丙戊",
                               "未":"丁己",
                               "申":"庚",
                               "戌":"辛",
                               "亥":"壬",
                               "癸":"丑"};
        function drawPan(ctx, w, h, pandata) {
            ctx.save();
            var rr = (Math.PI / 180) * 30;
            var fh = 15;
            ctx.font = '30px sans-serif';
            ctx.textBaseline = 'middle';
            ctx.translate(w / 2, h / 2);
            
            ctx.beginPath();
            ctx.arc(0, 0, 90, 0, Math.PI * 2, true);
            ctx.fillStyle = 'rgba(195, 56, 56, 0.1)';
            ctx.lineWidth = 5;
            ctx.strokeStyle = '#003300';
            ctx.fill();
            ctx.closePath();

            ctx.rotate(-rr);
            ctx.fillStyle = 'rgb(0,0,0)';
            var base = 130;
            for (var i = 0; i < pandata.length; i++) {
                ctx.font = '30px 標楷體';
                var 地 = pandata[i]["地"];
                if (JiGon[地] != undefined) {
                    ctx.font = '18px 標楷體';
                    var sub = JiGon[地];
                    ctx.fillText(sub, -9 * sub.length, base - 25);
                }
                ctx.font = '30px 標楷體';
                ctx.fillText(地, -fh, base);
                ctx.font = '20px 標楷體';
                ctx.fillText(pandata[i]["天將"], -20, base + 40);
                ctx.font = '30px 標楷體';
                ctx.fillText(pandata[i]["天"], -fh, base + 80);
                ctx.font = '20px 標楷體';
                ctx.fillText(pandata[i]["支神"], -20, base + 120);

                ctx.rotate(rr);
            }
            ctx.restore();
        }


        function applyTrans3(trans) {
            var trs = [trans["初傳"], trans["中傳"], trans["末傳"]];
            for (i = 1; i <= 3; i++) {
                $('#t' + i + '_ji').html(trs[i - 1]["支神"]);
                $('#t' + i + '_god').html(trs[i - 1]["天將"]);
                $('#t' + i + '_gan').html(trs[i - 1]["遁干"]);
                $('#t' + i + '_f').html(trs[i - 1]["六親"]);

            }
        }
        function appluClass4(clazz4) {

            for (i = 0; i < 4; i++) {
                $('#c' + i + '_god').html(clazz4[i]["天將"]);
                $('#c' + i + '_up').html(clazz4[i]["柱"].substr(0, 1));
                $('#c' + i + '_down').html(clazz4[i]["柱"].substr(1, 1));
            }
        }
        function applyOptions(opts) {
            $.each(opts, function (index, value) {
                $('#' + index).html(value);
            });

        }
        function applyPuTime(pandata) {
            $('#gj_year').html(pandata["占課四柱"]["yearGj"]["干支"]);
            $('#gj_month').html(pandata["占課四柱"]["monthGj"]["干支"]);
            $('#gj_day').html(pandata["占課四柱"]["dayGj"]["干支"]);
            $('#mongeneral').html(pandata["月將"]);
            $('#gj_hour').html(pandata["占課四柱"]["hourGj"]["干支"]);
            
            
        }
        function applySideOptions(options) {
           
              var opts=["旬首","日德","行年","日空",
                                "六合","三合","旬丁","驛馬","天馬","桃花",
                                "月德","支德","支沖","支刑","支破","支害",
                                "旬庚", "旬辛", "旬癸", "時空"]; //, "占法", "晝貴", "夜貴"];
              $.each(opts, function (index, value) {
                  // alert(value+ options[value]);
                  var content = '<tr><td>' + value + '</td><td>' + options[value] + '</td><td>&nbsp;&nbsp;</td></tr>';
                  $('#options_table').append(content);
                  //$('#' + index).html(value);
              });
        }

        function init() {
            var canvas = document.getElementById('pan');
            var data = ['子', '丑', '寅', '卯', '辰', '巳', '午', '未', '申', '酉', '戌', '亥'];
            if (canvas.getContext) {
                var ctx = canvas.getContext('2d');
                ctx.fillStyle = 'rgb(250,250,250)';
                ctx.fillRect(0, 0, canvas.width, canvas.height);
                //drawonCanvas(ctx, canvas.width, canvas.height);
                drawPan(ctx, canvas.width, canvas.height, panx["盤"]);
            }
            applyTrans3(panx["三傳"]);
            appluClass4(panx["課"]);
            applySideOptions(panx["options"]);
            applyPuTime(panx);
        }
    </script>
    
    <script type="text/javascript">

        var panx =$panti$;
        
    </script>
</body>
</html>
